<template>
  <div>
    <home-header ></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconsList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>

</template>
<script>
  import HomeHeader from './components/Header'
  import HomeSwiper from './components/Swiper'
  import HomeIcons from './components/Icons'
  import HomeRecommend from './components/Recommend'
  import HomeWeekend   from './components/Weekend'
 import axios from 'axios'
  import {mapState} from 'vuex'
export default {
    name:'Home',
  components:{
      HomeHeader:HomeHeader,
      HomeSwiper:HomeSwiper,
      HomeIcons:HomeIcons,
      HomeRecommend:HomeRecommend,
      HomeWeekend:HomeWeekend,
  },
  data:function(){
      return {
        lastCity:"",
        swiperList:[],
        iconsList:[],
        recommendList:[],
        weekendList:[]

      }


  },
  methods:{
      getHomeInfo(){
        axios.get("/static/mock/index.json?city="+this.city)
          .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res){
          //console.log(res.data)
          res=res.data;
          if(res.ret && res.data){
            const data=res.data;
            //this.city=data.city;
            this.swiperList=data.swiperList;
            this.iconsList=data.iconsList;
            this.recommendList=data.recommendList;
            this.weekendList=data.weekendList;
          }
      }
  },
  computed:{
    ...mapState(['city'])
  },
  mounted(){
      this.lastCity=this.city
      this.getHomeInfo();
    console.log("mounted发生了")
  },
  activated(){//当页面重新被显示的时候一定会执行
      if(this.lastCity !== this.city){
        this.lastCity =this.city
        this.getHomeInfo()
      }
      console.log("activated发生了")

  }
  }
</script>
<style>

</style>
